<template>
  <BgWrapper>
    <div class="user-detail fx container">
      <UserLeft></UserLeft>
      <div class="user-right">
        <FocusMsg></FocusMsg>
        <ul class="list m-t-1">
          <ListItem
            v-for="(item, i) in renderData"
            :key="i"
            :item="item"
          ></ListItem>
        </ul>
      </div>
    </div>
  </BgWrapper>
</template>

<script>
import UserLeft from "@/components/user/userDetail/UserLeft";
import BgWrapper from "@/components/common/BgWrapper";
import FocusMsg from "@/components/user/userDetail/userRight/FocusMsg";
import ListItem from "@/components/user/userDetail/userRight/ListItem";
import { getTimeMsg } from "@/utils/utils";
import { getUserDetail } from "@/api/user";
import { getSessionStorage, parse } from "@/utils/utils";
export default {
  name: "UserDetail",
  components: {
    UserLeft,
    BgWrapper,
    FocusMsg,
    ListItem,
  },
  data() {
    return {
      user: {},
      renderData: [],
    };
  },
  async created() {
    const i = getSessionStorage("cid");
    let id;
    if (i) {
      id = parse(i).id;
    }
    const { data } = await getUserDetail(id);

    this.user = data;
    this.renderData = [
      {
        name: "收藏集",
        count: data.collections || 0,
      },
      {
        name: "关注标签",
        count: data.focusTags || 0,
      },
      {
        name: "加入于",
        count: getTimeMsg(data.createdAt),
      },
    ];
  },
};
</script>

<style lang="scss" scoped>
.user-detail {
  align-items: flex-start;
  justify-content: space-between;
  .user-right {
    width: 24rem;
  }
}
</style>